import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";

// 路由的懒加载（按需加载 有缓存）
const Login = () => import('@/pages/Login')
const Home = () => import('@/pages/Home')
const Register = () => import('@/pages/Register')
const Search = () => import('@/pages/Search')
const Details = () => import('@/pages/Detail')
const AddCartSuccess = () => import('@/pages/AddCartSuccess')
const ShopCart = () => import('@/pages/ShopCart')
const Trade = () => import('@/pages/Trade')
const Pay = () => import('@/pages/Pay')
const PaySuccess = () => import('@/pages/PaySuccess')
const Center = () => import('@/pages/Center')
const MyOrder = () => import('@/pages/Center/components/MyOrder')
const GroupOrder = () => import('@/pages/Center/components/GroupOrder')

// 应用路由插件
Vue.use(VueRouter)

// 重写 VueRouter的push方法和replace方法  重复点击会导致返回失败的promise  这里处理一下
const OldPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location, onComplete = () => {
}, onAbort = () => {
}) {
	OldPush.call(this, location, onComplete, onAbort)
}

const OldReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function (location, onComplete = () => {
}, onAbort = () => {
}) {
	OldReplace.call(this, location, onComplete, onAbort)
}

const router = new VueRouter({
	mode: 'history',  // 设置路由模式
	routes: [  // 配置路由表
		{
			path: '/Login',
			name: 'Login',
			component: Login,
			meta: {
				isHidden: true
			}
		},
		{
			path: '/Home',
			name: 'Home',
			component: Home
		},
		{
			path: '/Register',
			name: 'Register',
			component: Register,
			meta: {
				isHidden: true
			}
		},
		{
			// 配置了params参数的传递
			path: '/Search/:searchKey?',
			name: 'Search',
			component: Search
		},
		{
			// 配置了params参数的传递
			path: '/Details/:skuId',
			name: 'Details',
			component: Details
		},
		{
			// 配置了params参数的传递
			path: '/AddCartSuccess',
			name: 'AddCartSuccess',
			component: AddCartSuccess
		},
		{
			// 配置了params参数的传递
			path: '/ShopCart',
			name: 'ShopCart',
			component: ShopCart,
		},
		{
			path: '/Trade',
			name: 'Trade',
			component: Trade,
			beforeEnter: (to, from, next) => {
				// from 来这个路由  的之前的路由信息
				if (from.name !== 'ShopCart') return next('/ShopCart')
				next()
			}
		},
		{
			path: '/Pay',
			name: 'Pay',
			component: Pay,
			beforeEnter: (to, from, next) => {
				// from 来这个路由  的之前的路由信息
				if (from.name !== 'Trade') return next('/Trade')
				next()
			}
		},
		{
			path: '/PaySuccess',
			name: 'PaySuccess',
			component: PaySuccess,
			beforeEnter: (to, from, next) => {
				// from 来这个路由  的之前的路由信息
				if (from.name !== 'Pay') return next('/Pay')
				next()
			}
		},
		{
			path: '/Center',
			// name: 'Center',
			component: Center,
			redirect: '/Center/MyOrder',
			children: [
				{
					path: 'MyOrder',
					name: 'MyOrder',
					component: MyOrder,
				},
				{
					path: 'GroupOrder',
					name: 'GroupOrder',
					component: GroupOrder,
				},
			]
		},
		{
			path: '/',
			redirect: '/Home',
		}
	],
	scrollBehavior() { // 自定义路由切换时页面的滚动。
		// return 期望滚动到哪个的位置
		return {x: 0, y: 0}
	}
})

// 设置白名单 这是不需要token也能去的页面
const white = ["Login",
	"Home",
	"Register",
	"Search",
	"Detail",
	"AddCartSuccess",]

// 设置token检验 实现免密登录 配置全局前置路由守卫
router.beforeEach(async (to, form, next) => {
	
	// 1- 是否拥有token
	const token = store.state.user.token
	if (token) { // 有token
		// 有token不能去登录页
		if (to.name === 'Login') {
			next('/Home')
		} else {
			// 判断有不有用户信息
			const userNickName = store.state.user.userInfo.nickName;
			if (userNickName === '') { // 没有的话
				try {
					// 获取用户信息
					await store.dispatch('user/getUserInfo')
					next()
				} catch (e) {
					// 获取不到用户信息(可能token过期) 那就删除所有登录用户的信息 然后让他重新登录
					await store.dispatch('user/deleteUserInfo')
					next(`/Login?redirect=${to.name}`)
				}
			} else { // 有的话  你可以去任意地方
				next()
			}
		}
	} else { // 无token
		// 判断你去的地方需不需要token
		if (white.includes(to.name)) {
			next();
		} else {
			next(`/Login?redirect=${to.name}`)
		}
	}
	
})

export default router